<style>
  .routerRoot{
    position: relative;
  }
  .routerRoot > * ,
  app-home,
  app-company,
  app-about,
  .ng-star-inserted{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
</style>
<div>
  {{todos|async|json}}
</div>

<input #AddTodoInput type="text" placeholder="add todo" />

<ul @todoAnimations>
  <h2>Todos</h2>
  <li @slide >
    1
  </li>
  <li @slide >
    2
  </li>
  <li @slide >
    3
  </li>
  <!-- <li 
    @slide 
    (@slide.start)="startSlide($event)" 
    (@slide.done)="doneSlide($event)"
    *ngFor="let todo of todos | async"
  >
    {{ todo.title }} <button (click)="deleteTodo(todo.id)">删除</button>
  </li> -->
</ul>

<button (click)="toggle()">折叠展开</button>
<div class="panel-body" [@collapsedExpanded]="collapsed?'collapsed':'expanded'">
  <p>
    使用简单的声明式模板，快速实现各种特性。使用自定义组件和大量现有组件，扩展模板语言。在几乎所有的
    IDE 中获得针对 Angular
    的即时帮助和反馈。所有这一切，都是为了帮助你编写漂亮的应用，而不是绞尽脑汁的让代码“能用”。
  </p>
  <p>
    从原型到全球部署，Angular 都能带给你支撑 Google
    大型应用的那些高延展性基础设施与技术。
  </p>
  <p>
    通过 Web Worker 和服务端渲染，达到在如今(以及未来）的 Web
    平台上所能达到的最高速度。 Angular 让你有效掌控可伸缩性。基于
    RxJS、Immutable.js 和其它推送模型，能适应海量数据需求。
  </p>
  <p>
    学会用 Angular
    构建应用，然后把这些代码和能力复用在多种多种不同平台的应用上 ——
    Web、移动 Web、移动应用、原生应用和桌面原生应用。
  </p>
</div>

<a routerLink="/">首页</a>
<a routerLink="/about">关于我们</a>
<a routerLink="/company">公司</a>
<div [@routerAnimations]="prepareRoute(outlet)" class="routerRoot">
  <router-outlet #outlet="outlet"></router-outlet>
</div>

